<template>
  <div class="app-container">
   <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="请选择出租状态" prop="hstatus">
        <el-select v-model="queryParams.hstatus" placeholder="请选择出租状态" @change="changehstatus" clearable>
          <el-option
            v-for="item in hstatusOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

        <el-form-item label="请选择发布状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择出租状态" @change="changestatus" clearable>
            <el-option
              v-for="item in statusOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item prop="pname">
        <el-input
          v-model="queryParams.pname"
          placeholder="请输入楼盘关键字"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>-->

    <div>
      <el-form v-model="form" :inline="true" label-width="68px">
        <el-form-item>
          <el-input v-model="form.roomname" placeholder="楼盘名称" clearable size="small"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getSearch">高亮查询</el-button>
        </el-form-item>
      </el-form>
    </div>


    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="房源图片" align="center" prop="frontCover" >
        <template slot-scope="scope">
          <el-image :src="scope.row.frontCover" ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="房源名称" align="center" prop="roomName" />
      <el-table-column label="楼盘名称" align="center"  prop="pname">
        <template slot-scope="scope">
          <span v-html="scope.row.pname"></span>
        </template>
      </el-table-column>
      <el-table-column label="房源编号" align="center" prop="roomCode" />
      <el-table-column label="面积" align="center" prop="proportion" />
      <el-table-column label="租金" align="center" prop="rental" />
      <el-table-column label="出租状态" align="center" prop="status" />
      <el-table-column label="发布人" align="center" prop="sname" />
      <el-table-column label="发布状态" align="center" prop="hstatus" />
      <el-table-column label="是否推荐" align="center" prop="recommended" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
  import { getSearch,listContract, getInfo, delInfo, addInfo, updateInfo } from "@/api/termination/houselist";

  export default {
    name: "houselist",
    components: {
    },
    data() {
      return {
        roomname: null,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        hstatusOpt: [{
          value: '0',
          label: '待出租'
        },
          {
            value: '1',
            label: '已出租'
          },
          {
            value: '2',
            label: '维修中'
          },
        ],
        statusOpt: [{
          value: '0',
          label: '未发布'
        },{
          value: '1',
          label: '已发布'
        },
        ],
          // 查询参数
        queryParams: {
          roomname: null,
          pageNum: 1,
          pageSize: 10,
          houseId: null,
          frontCover: null,
          roomName: null,
          roomCode: null,
          proportion: null,
          direction: null,
          rental: null,
          decorateStyle: null,
          buildingName: null,
          floor: null,
          floorCount: null,
          status: null,
          privateFacility: null,
          recommended: null,
          hstatus: null,
          sname: null,
          pname: null,
          reserve4: null,
          reserve5: null,
          deptId: null,
          styleId: null,
          finishDate: null,
          vacancyDate: null,
          delFlg: null,
        },
        // 表单参数
        form: {
          roomname: "",
        },

      };
    },
    created() {
      this.getList();
    },
    methods: {
      getSearch(){
        getSearch(this.form.roomname).then(resp=>{
          this.infoList=resp;
          console.log(resp)
        })
      },
      changestatus(value){
         this.queryParams.status = value
      },
      changehstatus(value){
        this.queryParams.hstatus = value
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;
        listContract(this.queryParams).then(response => {
          this.infoList = response;
          console.log(response)
          response.forEach(i=>{
            if(i.status ==0){
              i.status = '未出租'
            }
            if(i.status ==1){
              i.status = '已出租'
            }
            if(i.status ==2){
              i.status = '维修中'
            }
            if(i.hstatus ==1){
              i.hstatus = '已发布'
            }
            if(i.hstatus ==0){
              i.hstatus = '未发布'
            }
            if(i.recommended ==1){
              i.recommended = '已推荐'
            }
            if(i.recommended ==0){
              i.recommended = '未推荐'
            }
          })
          this.total = response[0].total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          houseId: null,
          frontCover: null,
          roomName: null,
          roomCode: null,
          proportion: null,
          direction: null,
          rental: null,
          decorateStyle: null,
          buildingName: null,
          floor: null,
          floorCount: null,
          status: 0,
          privateFacility: null,
          recommended: null,
          reserve1: null,
          reserve2: null,
          reserve3: null,
          reserve4: null,
          reserve5: null,
          deptId: null,
          createTime: null,
          styleId: null,
          finishDate: null,
          vacancyDate: null,
          delFlg: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },

    }
  };
</script>
